<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="constom/js/hammer.v2.0.8.js"></script>
    <script src="constom/js/zepto.min.v1.1.6.js"></script>
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;

        }
        .tou{
            position: fixed;
            left: 0;
            width: 100%;
            height: 80px;
            background: #159DEB;
        }
        .st{
           padding-top: 85px;
            width: 100%;

        }
        .a1,.a2,.a3,.a4,.a5,.a6{
            padding:  10px  0 5px 0;
            width: 90%;
            height: 130px;
            margin: auto;
            border-bottom: 1px solid #DEDEDE;

        }
        .zh{
            position: fixed;
            bottom: 8%;
            left: 24%;
        }
        .an{
            width: 200px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            background: red;
            border-radius: 5px;
            border: 0;
            color: #ffffff;
            font-weight: bolder;
            font-size: 20px;
        }
        .aa1{
            width: 35%;
            height: 100%;
            background: #000;
            float: left;
            background-image: url("1.jpg");
            background-size:180%;
            background-repeat: no-repeat;


        }
        .aa2{
            width: 65%;
            height: 100%;

            float: right;
            text-align: center;
            line-height: 120px;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
 <div class="tou">
<span style="border-radius: 50%;background: #000;border: 1px solid #000">00</span><span style="border-radius: 50%;background: #000;width: 10px;height: 10px;border: 1px solid #000">00</span><span style="border-radius: 50%;background: #000;width: 10px;height: 10px;border: 1px solid #000">00</span><span style="border-radius: 50%;border: 1px solid #000;width: 10px;height: 10px;">&nbsp;</span><span style="border-radius: 50%;border: 1px solid #000;width: 10px;height: 10px;">&nbsp;</span>
 <span style="color: #ffffff">中国移动 E</span>
  <div class="ss" style="float: right">
      <img src="2.png" alt=""/>
  </div>
 </div>
 <div class="st">
     <div class="a1" id="a1">
         <div class="aa1" ><img id="s2" src="1.jpg" alt=""/></div>
         <div class="aa2">蒲公英</div>
     </div>
     <div class="a2">
         <div class="aa1"></div>
         <div class="aa2">蒲公英</div>
     </div>
     <div class="a3">
         <div class="aa1"></div>
         <div class="aa2">蒲公英</div>
     </div>
     <div class="a4">
         <div class="aa1"></div>
         <div class="aa2">蒲公英</div>
     </div>
     <div class="a5">
         <div class="aa1"></div>
         <div class="aa2">蒲公英</div>
     </div>
     <div class="a6">
         <div class="aa1"></div>
         <div class="aa2">蒲公英</div>
     </div>
 </div>
<div class="zh">
    <button class="an">清空</button>
</div>
 <script>
    var a=10;
    var Deom=document.getElementById("a1");
         var hammerDeom= new Hammer(Deom);
        hammerDeom.on("swipe",function(){
        a++;

            var i = a;
            var s = i.toString();

            console.log(s);
        $("#s2").attr("src",s+".jpg");
            console.log(a);
            if(a>=14){
                a=10;
            }

        });

 </script>
</body>
</html>